import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, unref, createVNode, withCtx, createTextVNode } from "vue";
import { getColorInfo, rgbToHsv, hsvToRgb } from "./color.mjs";
import { Input, Button } from "ant-design-vue";
const _hoisted_1 = { class: "me-color-select" };
const _hoisted_2 = { class: "me-color-select-panel" };
const _hoisted_3 = { class: "me-color-select-hue" };
const _hoisted_4 = { class: "me-color-select-alpha" };
const _hoisted_5 = { class: "me-color-select-colors" };
const _hoisted_6 = ["onClick"];
const _hoisted_7 = { class: "me-color-select-input" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "color-select",
  props: {
    color: { default: "" },
    colorList: { default() {
      return [];
    } }
  },
  emits: ["change", "active-change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const testWhiteOrBlack = (color) => {
      return /^#(fff|000).*|rgba?\(255,255,255,?(0\.\d+|0|1)?\)|rgba?\(0,0,0,?(0\.\d+|0|1)?\)$/.test(color);
    };
    const isWhiteOrBlack = testWhiteOrBlack(props.color);
    const colorObj = ref(getColorInfo(isWhiteOrBlack ? "#f00" : props.color));
    const pointOffset = ref({
      left: "0px",
      top: "0px"
    });
    const presetList = props.colorList;
    const inputColor = ref(colorObj.value.rgba);
    const saturationRef = ref();
    const hRef = ref();
    const aRef = ref();
    const r = ref(0);
    const g = ref(0);
    const b = ref(0);
    const a = ref(colorObj.value.rgbaObj ? colorObj.value.rgbaObj.a : 1);
    const h = ref(0);
    const s = ref(1);
    const v = ref(1);
    const isMoving = ref(false);
    const hStyle = ref({
      left: 0
    });
    const aStyle = ref({
      left: "100%"
    });
    const alphaColor = ref(colorObj.value.rgbaObj ? { ...colorObj.value.rgbaObj } : {
      r: 255,
      g: 255,
      b: 255,
      a: 0
    });
    onMounted(() => {
      setHue(colorObj.value.rgbaObj.r, colorObj.value.rgbaObj.g, colorObj.value.rgbaObj.b);
      setTimeout(() => {
        hsvToOffset(s.value, v.value);
        setSOffset(h.value);
        setAOffset(a.value);
      }, 0);
    });
    watch(() => props.color, (newColor) => {
      updateColor(newColor);
    });
    const updateColor = (newColor) => {
      if (!isMoving.value) {
        const isWhiteOrBlack2 = testWhiteOrBlack(newColor);
        const colorObj2 = ref(getColorInfo(isWhiteOrBlack2 ? "#f00" : newColor));
        inputColor.value = inputColor.value ? colorObj2.value.rgba : "";
        setHue(colorObj2.value.rgbaObj.r, colorObj2.value.rgbaObj.g, colorObj2.value.rgbaObj.b);
        a.value = colorObj2.value.rgbaObj.a || 1;
        setTimeout(() => {
          hsvToOffset(s.value, v.value);
          setSOffset(h.value);
          setAOffset(a.value);
        }, 16);
      }
    };
    __expose({
      updateColor
    });
    const setHue = (r2, g2, b2) => {
      const hsv = rgbToHsv(r2, g2, b2);
      h.value = hsv.h;
      s.value = hsv.s;
      v.value = hsv.v;
    };
    const hsvToOffset = (s2, v2) => {
      let width = saturationRef.value.clientWidth;
      let height = saturationRef.value.clientHeight;
      let x = Math.floor(s2 * width + 0.5);
      let y = Math.floor((1 - v2) * height + 0.5);
      pointOffset.value = {
        left: x + "px",
        top: y + "px"
      };
    };
    const setSOffset = (h2) => {
      const width = hRef.value.clientWidth;
      let x = Math.floor(h2 / 360 * width + 0.5);
      hStyle.value.left = x + "px";
    };
    const setAOffset = (alpha) => {
      const width = aRef.value.clientWidth;
      const x = (alpha * width).toFixed(2);
      aStyle.value.left = x + "px";
    };
    const onMousedown = (evt) => {
      setPointOffset(evt);
      setColor(evt);
      window.addEventListener("mouseup", onMouseup);
      window.addEventListener("mousemove", onMousemove);
    };
    const onMouseup = () => {
      isMoving.value = false;
      window.removeEventListener("mouseup", onMouseup);
      window.removeEventListener("mousemove", onMousemove);
    };
    const onMousemove = (evt) => {
      isMoving.value = true;
      setPointOffset(evt);
      setColor(evt);
    };
    const setPointOffset = (evt) => {
      let w = saturationRef.value.clientWidth;
      let h2 = saturationRef.value.clientHeight;
      let x = evt.pageX - saturationRef.value.getBoundingClientRect().left - document.documentElement.scrollLeft;
      let y = evt.pageY - saturationRef.value.getBoundingClientRect().top - document.documentElement.scrollTop;
      x = x < w && x > 0 ? x : x > w ? w : 0;
      y = y < h2 && y > 0 ? y : y > h2 ? h2 : 0;
      pointOffset.value = {
        left: x + "px",
        top: y - 2 + "px"
      };
    };
    const setColor = (evt) => {
      let width = saturationRef.value.clientWidth;
      let height = saturationRef.value.clientHeight;
      let x = evt.pageX - saturationRef.value.getBoundingClientRect().left - document.documentElement.scrollLeft;
      let y = evt.pageY - saturationRef.value.getBoundingClientRect().top - document.documentElement.scrollTop;
      x = x < width && x > 0 ? x : x > width ? width : 0;
      y = y < height && y > 0 ? y : y > height ? height : 0;
      s.value = Math.floor(x / width * 100) / 100;
      v.value = Math.floor((1 - y / height) * 100) / 100;
      const rgb = hsvToRgb(h.value, s.value, v.value);
      const color = getColorInfo(`rgba(${rgb.r} , ${rgb.g} , ${rgb.b} , ${a.value})`);
      inputColor.value = color.rgba;
      r.value = rgb.r;
      g.value = rgb.g;
      b.value = rgb.b;
      alphaColor.value = {
        r: rgb.r,
        g: rgb.g,
        b: rgb.b,
        a: a.value
      };
      emits("active-change", inputColor.value);
    };
    const onMouseDownH = (evt) => {
      changeHueValue(evt);
      window.addEventListener("mouseup", onMouseupH);
      window.addEventListener("mousemove", onMousemoveH);
    };
    const changeHueValue = (evt) => {
      const width = hRef.value.clientWidth;
      let x = evt.pageX - hRef.value.getBoundingClientRect().left;
      x = x < width && x > 0 ? x : x >= width ? width : 0;
      h.value = Math.floor(x / width * 360 + 0.5);
      const rgb = hsvToRgb(h.value, s.value, v.value);
      colorObj.value = getColorInfo(`rgb(${rgb.r} , ${rgb.g} , ${rgb.b}) , ${a.value}`);
      inputColor.value = colorObj.value.rgba;
      alphaColor.value = colorObj.value.rgbaObj;
      hStyle.value.left = x + "px";
      emits("active-change", inputColor.value);
    };
    const onMouseupH = () => {
      window.removeEventListener("mouseup", onMouseupH);
      window.removeEventListener("mousemove", onMousemoveH);
    };
    const onMousemoveH = (evt) => {
      changeHueValue(evt);
    };
    const onMouseDownA = (evt) => {
      changeAValue(evt);
      window.addEventListener("mouseup", onMouseupA);
      window.addEventListener("mousemove", onMousemoveA);
    };
    const changeAValue = (evt) => {
      const width = aRef.value.clientWidth;
      let x = evt.pageX - aRef.value.getBoundingClientRect().left;
      x = x < width && x > 0 ? x : x >= width ? width : 0;
      const rgb = hsvToRgb(h.value, s.value, v.value);
      a.value = Number((x / width).toFixed(2));
      const color = getColorInfo(`rgba(${rgb.r} , ${rgb.g} , ${rgb.b} , ${a.value})`);
      alphaColor.value = color.rgbaObj;
      inputColor.value = color.rgba;
      aStyle.value.left = x + "px";
      emits("active-change", inputColor.value);
    };
    const onMouseupA = () => {
      window.removeEventListener("mouseup", onMouseupA);
      window.removeEventListener("mousemove", onMousemoveA);
    };
    const onMousemoveA = (evt) => {
      changeAValue(evt);
    };
    const onClear = () => {
      alphaColor.value = {
        r: 255,
        g: 255,
        b: 255,
        a: 1
      };
      emits("change", "transparent");
      inputColor.value = "";
    };
    const onConfirm = () => {
      emits("change", inputColor.value);
    };
    const onClick = (color) => {
      const colorObj2 = getColorInfo(color);
      inputColor.value = colorObj2.rgba;
      setHue(colorObj2.rgbaObj.r, colorObj2.rgbaObj.g, colorObj2.rgbaObj.b);
      hsvToOffset(s.value, v.value);
      setSOffset(h.value);
      setAOffset(a.value);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("div", {
            class: "me-color-select-panel-saturation",
            onMousedown,
            ref_key: "saturationRef",
            ref: saturationRef,
            style: normalizeStyle({ backgroundColor: `hsl(${h.value} , 100% , 50%)` })
          }, [
            createElementVNode("div", {
              class: "me-color-select-pointer",
              style: normalizeStyle(pointOffset.value)
            }, _cache[1] || (_cache[1] = [
              createElementVNode("div", { class: "me-color-select-pointer-point" }, null, -1)
            ]), 4),
            _cache[2] || (_cache[2] = createElementVNode("div", { class: "me-color-select-panel-white" }, null, -1)),
            _cache[3] || (_cache[3] = createElementVNode("div", { class: "me-color-select-panel-black" }, null, -1))
          ], 36)
        ]),
        createElementVNode("div", _hoisted_3, [
          createElementVNode("div", {
            class: "me-color-select-hue-slider",
            ref_key: "hRef",
            ref: hRef,
            onMousedown: onMouseDownH
          }, [
            _cache[4] || (_cache[4] = createElementVNode("div", { class: "me-color-select-hue-slider-bar" }, null, -1)),
            createElementVNode("div", {
              class: "me-color-select-hue-slider-thumb",
              style: normalizeStyle(hStyle.value)
            }, null, 4)
          ], 544)
        ]),
        createElementVNode("div", _hoisted_4, [
          createElementVNode("div", {
            class: "me-color-select-alpha-slider",
            ref_key: "aRef",
            ref: aRef,
            onMousedown: onMouseDownA
          }, [
            createElementVNode("div", {
              class: "me-color-select-alpha-slider-bar",
              style: normalizeStyle({ background: `linear-gradient(to right , rgba(${alphaColor.value.r} , ${alphaColor.value.g} , ${alphaColor.value.b} , 0) , rgba(${alphaColor.value.r} , ${alphaColor.value.g} , ${alphaColor.value.b} , 1))` })
            }, null, 4),
            createElementVNode("div", {
              class: "me-color-select-alpha-slider-thumb",
              style: normalizeStyle(aStyle.value)
            }, null, 4)
          ], 544)
        ]),
        createElementVNode("div", _hoisted_5, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(presetList), (color, index) => {
            return openBlock(), createElementBlock("span", {
              onClick: ($event) => onClick(color),
              key: index,
              style: normalizeStyle({ backgroundColor: color }),
              class: "me-color-select-colors-preset"
            }, null, 12, _hoisted_6);
          }), 128))
        ]),
        createElementVNode("div", _hoisted_7, [
          createVNode(unref(Input), {
            value: inputColor.value,
            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => inputColor.value = $event)
          }, null, 8, ["value"]),
          createVNode(unref(Button), {
            onClick: onClear,
            class: "me-color-select-input-btn"
          }, {
            default: withCtx(() => _cache[5] || (_cache[5] = [
              createTextVNode("清空")
            ])),
            _: 1
          }),
          createVNode(unref(Button), {
            onClick: onConfirm,
            class: "me-color-select-input-btn"
          }, {
            default: withCtx(() => _cache[6] || (_cache[6] = [
              createTextVNode("确定")
            ])),
            _: 1
          })
        ])
      ]);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=color-select.vue2.mjs.map
